<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>components</title>
</head>
<body>
<!-- Chat -->
<div id="chat" class="chat">

    <!-- Chat List -->
    <div class="pull-left chat-list">
        <div class="listview narrow">
            <div class="media">
                <img class="pull-left" src="/static/img/profile-pics/1.jpg"
                     th:src="@{/img/profile-pics/1.jpg}" width="30" alt="">
                <div class="media-body p-t-5">
                    Alex Bendit
                </div>
            </div>
            <div class="media">
                <img class="pull-left" src="/static/img/profile-pics/2.jpg"
                     th:src="@{/img/profile-pics/2.jpg}" width="30" alt="">
                <div class="media-body">
                    <span class="t-overflow p-t-5">David Volla Watkinson</span>
                </div>
            </div>
            <div class="media">
                <img class="pull-left" src="/static/img/profile-pics/3.jpg"
                     th:src="@{/img/profile-pics/3.jpg}" width="30" alt="">
                <div class="media-body">
                    <span class="t-overflow p-t-5">Mitchell Christein</span>
                </div>
            </div>
            <div class="media">
                <img class="pull-left" src="/static/img/profile-pics/4.jpg"
                     th:src="@{/img/profile-pics/4.jpg}" width="30" alt="">
                <div class="media-body">
                    <span class="t-overflow p-t-5">Wayne Parnell</span>
                </div>
            </div>
            <div class="media">
                <img class="pull-left" src="/static/img/profile-pics/5.jpg"
                     th:src="@{/img/profile-pics/5.jpg}" width="30" alt="">
                <div class="media-body">
                    <span class="t-overflow p-t-5">Melina April</span>
                </div>
            </div>
            <div class="media">
                <img class="pull-left" src="/static/img/profile-pics/6.jpg"
                     th:src="@{/img/profile-pics/6.jpg}" width="30" alt="">
                <div class="media-body">
                    <span class="t-overflow p-t-5">Ford Harnson</span>
                </div>
            </div>

        </div>
    </div>

    <!-- Chat Area -->
    <div class="media-body">
        <div class="chat-header">
            <a class="btn btn-sm" href="">
                <i class="fa fa-circle-o status m-r-5"></i> Chat with Friends
            </a>
        </div>

        <div class="chat-body">
            <div class="media">
                <img class="pull-right" src="/static/img/profile-pics/1.jpg"
                     th:src="@{/img/profile-pics/1.jpg}" width="30" alt=""/>
                <div class="media-body pull-right">
                    Hiiii<br/>
                    How you doing bro?
                    <small>Me - 10 Mins ago</small>
                </div>
            </div>

            <div class="media pull-left">
                <img class="pull-left" src="/static/img/profile-pics/2.jpg"
                     th:src="@{/img/profile-pics/2.jpg}" width="30" alt=""/>
                <div class="media-body">
                    I'm doing well buddy. <br/>How do you do?
                    <small>David - 9 Mins ago</small>
                </div>
            </div>

            <div class="media pull-right">
                <img class="pull-right" src="/static/img/profile-pics/2.jpg"
                     th:src="@{/img/profile-pics/2.jpg}" width="30" alt=""/>
                <div class="media-body">
                    I'm Fine bro <br/>Thank you for asking
                    <small>Me - 8 Mins ago</small>
                </div>
            </div>

            <div class="media pull-right">
                <img class="pull-right" src="/static/img/profile-pics/2.jpg"
                     th:src="@{/img/profile-pics/2.jpg}" width="30" alt=""/>
                <div class="media-body">
                    Any idea for a hangout?
                    <small>Me - 8 Mins ago</small>
                </div>
            </div>

        </div>

        <div class="chat-footer media">
            <i class="chat-list-toggle pull-left fa fa-bars"></i>
            <i class="pull-right fa fa-picture-o"></i>
            <div class="media-body">
                <textarea class="form-control" placeholder="Type something."></textarea>
            </div>
        </div>

    </div>
</div>

</body>
</html>